<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <title>广州农商银行-端午节活动</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/form.css">
    <style>
        input::-webkit-input-placeholder {
        color: #5d7a1d !important; 
        text-indent:0em;
        }
        input:-moz-placeholder {
        color: #5d7a1d !important; 
        text-indent:0em;
        }
        input::-moz-placeholder {
        color: #5d7a1d !important; 
        text-indent:0em;
        }
        input:-ms-input-placeholder {
        color: #5d7a1d !important;
        text-indent:0em;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body class="enter-success">
    <header class="header-whole">
        <section class="logo">
            <img src="img/bank-logo.png" alt="广州农商银行">
        </section>
    </header>
    <section class="wrapper">
        <section class="title"><img src="img/title-succes.png" alt="闯关成功"></section>
        <section class="despcrition-suc">
            <img src="img/desp-succes.png" alt="闯关成功文字描述">
        </section>
        <section class="person">
            <img src="img/person.png" alt="人">
            <div class="person-inner">
                <a href="javascript:void(0);" class="separate-btn cant-separate" id="separate-btn"></a>
                <a href="javascript:void(0);" class="share-btn"></a>
            </div>
        </section>
    </section>
     <!-- 输入手机号 - 弹窗 -->
    <section class="poup-section check-phone hide" id="checkPhone">
        <section class="form-box">
            <div class="text-outer">
                <input type="tel" class="input-text" id="tel" placeholder="请输入手机号">
            </div>
            <div class="text-outer">
                <input type="text" class="input-text" placeholder="请输入图形验证码">
                <img src="img/auth-code2.png" alt="验证码" class="auth btn-text">
            </div>
        </section>
        <section class="submit-box">
            <a href="javascript:void(0);" class="notsepa-btn"></a>
            <a href="javascript:void(0);" class="sepa-btn"></a>
        </section>
    </section>
    <!-- 未注册 - 弹窗 -->
    <section class="poup-section not-reg hide">
        <section class="submit-box">
            <a href="javascript:void(0);" class="notplay-btn"></a>
            <a href="javascript:void(0);" class="regs-btn"></a>
        </section>
    </section>
    <!-- 分享 - 弹窗-->
    <section class="poup-section share_poup hide"></section>
    <!-- 专属码说明 - 弹窗-->
    <!-- <section class="poup-section excCode-despcription hide"></section> -->
    <footer class="footer-whole"></footer>
    
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript">
        var Etouch = 'touchstart';
        var second = 2500;//（测试2500）生产环境6000
        var stime1 = null ;
        var $shareBtn = $('.share-btn'),
            $sharePop = $('.share_poup'),
            $separate_btn = $('#separate-btn'),
            $notsepa_btn = $('.notsepa-btn');

        // 显示分享弹窗
        $shareBtn.on(Etouch,function () {
            stime1 && clearTimeout();
            $sharePop.removeClass('hide');

            stime1 = setTimeout(function () {
               $separate_btn.removeClass('cant-separate');
               $sharePop.addClass('hide');
            },second);
        });
        // 显示（输入手机号）弹窗
        $separate_btn.on(Etouch,function (evt) {
            if ( $(this).hasClass('cant-separate') ) { return ;}
            evt.preventDefault();
            $('#checkPhone').removeClass('hide');
            $("#tel").focus();
        });
        // 关掉（输入手机号）弹窗
        $notsepa_btn.on(Etouch,function () {
            $('#checkPhone').addClass('hide');
        });
        
    </script>
</body>
</html>
